<template>
  <div>
    <a-layout class="staff-manage-wrapper p24 page-miH page-bgBack">
      <a-row class="mb24" v-if="$route.query.pageType">
        <a-col>
          <a-button @click="$router.go(-1)"> <a-icon type="left" />返回 </a-button>
        </a-col>
      </a-row>
      <a-row class="mb24" justify="space-between" type="flex">
        <a-col>
          <div class="filter-wrapper">
            <a-input-search placeholder="请输入关键字搜索" style="width: 200px" :allow-clear="true" @search="handleSearch" />
          </div>
        </a-col>
        <a-col>
          <a-button class="mr12" :disabled="!selectedRowKeys.length" @click="() => download(1)">批量导出</a-button>
          <a-button class="mr12" type="primary" :disabled="!data.length" @click="() => download(2)">全部导出</a-button>
        </a-col>
      </a-row>
      <a-table
        :columns="columns"
        :data-source="data"
        row-key="id"
        :pagination="pagination"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
        :loading="tableLoading"
        @change="handleTableChange"
      >
        <!-- <template slot="companyArea" slot-scope="text">
          <div class="pointer">
            <a-popover trigger="click" arrow-point-at-center>
              <template slot="content">
                <div style="width:200px">
                  <span v-for="(item, index) in text" :key="index"> {{ item }},</span>
                </div>
              </template>
              <p v-if="text[2]" style="margin:0">{{ text[0] }},{{ text[1] }}等{{ text.length }}个地区</p>
              <p v-else style="margin:0">{{ text[0] }}{{ text[1] }}</p>
            </a-popover>
          </div>
        </template> -->
        <!-- <template slot="subCompany" slot-scope="text, record">
          <div class="pointer" @click="showCompany(record)">
            <p v-if="text === []">{{ text }}</p>
            <p v-if="text[1]" style="margin:0">{{ text[0] }}等{{ text.length }}个单位</p>
            <p v-else style="margin:0">{{ text[0] }}</p>
          </div>
        </template> -->
        <template slot="companyStr" slot-scope="text, record">
          <div class="pointer primarys" @click="showCompany(record)">
            {{ text }}
            <!-- <p v-if="text === []">{{ text }}</p>
            <p v-if="text[1]" style="margin:0">{{ text[0].name }}等{{ text.length }}个单位</p>
            <p v-else style="margin:0">{{ text[0].name }}</p> -->
          </div>
        </template>
        <!-- <template slot="legalPerson" slot-scope="text, record">
          <span class="primary_color" style="cursor: pointer;" @click="showAdministrator(record)"> 管理员详情</span>
        </template> -->
      </a-table>
      <!-- <a-modal v-model="userVisible" :title="`${compyName}` + '管理员'" width="850px" @ok="handleUserOk">
        <a-input-search
          v-model="searchForm.keyWord"
          :allow-clear="true"
          placeholder="姓名或手机号"
          style="width: 180px;margin-left:10px;"
          @search="nameChange"
        />

        <a-table
          :data-source="userList"
          :columns="userGroup"
          :pagination="pagination3"
          :loading="userListLoading"
          style="margin-top:50px"
          @change="handlePageChange2"
        />
      </a-modal> -->
      <a-modal v-model="companyVisible" :title="`${compyName}` + '分管单位'" width="850px" :footer="null" @ok="handleCompanyOk">
        <a-input-search
          v-model="unitSearchForm.keyWord"
          :allow-clear="true"
          placeholder="请输入关键字搜索"
          style="width: 180px"
          @search="unitNameChange"
        />
        <a-table
          :data-source="userList"
          :columns="companyGroup"
          :pagination="pagination2"
          :loading="userListLoading"
          style="margin-top: 24px"
          @change="handlePageChange"
        />
      </a-modal>
    </a-layout>
  </div>
</template>

<script>
import { getChildrenComany, getChildCompanyAdmin, getSubCompany } from "@/api/overview/employer";
import ExportMixin from "xqjr-plugin-common/UploadOrExport/exportMixin";
const mixin = new ExportMixin();
import axios from "axios";
import qs from "qs";
import { mapGetters } from "vuex";
const columns = [
  {
    title: "用工单位组名称",
    dataIndex: "name"
    // width: 170
  },
  // {
  //   title: "公司地址",
  //   dataIndex: "companyAddress",
  //   ellipsis: true,
  //   width: 120
  // },
  // {
  //   title: "分管地区",
  //   dataIndex: "companyArea",
  //   ellipsis: true,
  //   width: 120,
  //   scopedSlots: { customRender: "companyArea" }
  // },
  {
    title: "分管单位",
    dataIndex: "companyStr",
    ellipsis: true,
    // width: 360,
    scopedSlots: { customRender: "companyStr" }
  }
  // {
  //   title: "管理员",
  //   dataIndex: "legalPerson",
  //   scopedSlots: { customRender: "legalPerson" },
  //   ellipsis: true,
  //   width: 160
  // }
];
const userGroup = [
  {
    title: "姓名",
    dataIndex: "userName",
    key: "userName",
    scopedSlots: { customRender: "userName" },
    width: 80
  },
  {
    title: "员工手机号",
    dataIndex: "phone",
    key: "phone",
    scopedSlots: { customRender: "phone" },
    width: 80
  }
];
const companyGroup = [
  {
    title: "单位名称",
    dataIndex: "name",
    key: "name",
    scopedSlots: { customRender: "name" },
    width: 80
  },
  {
    title: "联系人姓名",
    dataIndex: "legalPerson",
    key: "legalPerson",
    scopedSlots: { customRender: "legalPerson" },
    width: 80
  },
  {
    title: "联系电话",
    dataIndex: "telephone",
    key: "telephone",
    scopedSlots: { customRender: "telephone" },
    width: 80
  }
];
export default {
  mixins: [mixin],

  data() {
    return {
      unitList: [],
      userList: [],
      userGroup,
      companyGroup,
      userVisible: false,
      companyVisible: false,
      equipmentIdList: [],
      name: "",
      joinCityCode: "",
      joinCityName: "",
      searchForm: {},
      unitSearchForm: {},
      selectedRowKeys: [],
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      pagination2: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      pagination3: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      labelCol: { span: 7 },
      wrapperCol: { span: 12 },
      data: [],
      regionList: [],
      columns,
      compyName: "",
      userRecord: "",
      companyRecord: "",
      tableLoading: false,
      pageNam: "",
      userListLoading: false
    };
  },
  computed: {
    ...mapGetters(["permissions_site"])
  },

  created() {
    this.companyId = this.$store.state.hr.companyId;
    // if (this.$route.query.name)
    this.getChildrenComanyList();
  },

  methods: {
    showCompany(record) {
      this.userListLoading = true;
      this.userList = [];
      this.companyRecord = record;
      this.unitSearchForm = {};
      this.compyName = record.name;
      this.pagination2.current = 1;

      this.companyVisible = true;
      getSubCompany({ id: record.id })
        .then((res) => {
          this.userList = res.data;
          this.userListLoading = false;
        })
        .catch(() => {
          this.userListLoading = false;
        });
    },
    showAdministrator(record) {
      this.userListLoading = true;
      this.userList = [];
      this.searchForm = {};
      this.compyName = record.name;
      this.pagination2.current = 1;
      this.userRecord = record;
      this.userVisible = true;
      this.onGetChildCompanyAdmin(record.id);
    },
    onGetChildCompanyAdmin(id, name) {
      getChildCompanyAdmin({
        userQuery: {
          companyIdList: [id],
          userQuery: name,
          pageNo: this.pagination2.current,
          pageSize: this.pagination2.pageSize
        }
      })
        .then((res) => {
          this.userList = res.data;
          this.userListLoading = false;
        })
        .catch(() => {
          this.userList = [];
          this.userListLoading = false;
        });
    },
    handleUserOk() {
      this.userVisible = false;
    },
    handleCompanyOk() {
      this.companyVisible = false;
    },
    handlePageChange(pagination, filters, sorter) {
      this.pagination2.current = pagination.current;
      this.pagination2.pageSize = pagination.pageSize;
    },
    handlePageChange2(pagination, filters, sorter) {
      this.pagination3.current = pagination.current;
      this.pagination3.pageSize = pagination.pageSize;
    },
    nameChange(e) {
      this.searchForm.keyWord = e;
      this.pagination.current = 1;
      getSubCompany({ id: this.companyRecord.id, name: e })
        .then((res) => {
          this.userList = res.data;
          this.userListLoading = false;
        })
        .catch(() => {
          this.userListLoading = false;
        });
    },
    unitNameChange(e) {
      getSubCompany({ id: this.companyRecord.id, name: e })
        .then((res) => {
          this.userList = res.data;
          this.userListLoading = false;
        })
        .catch(() => {
          this.userListLoading = false;
        });
    },
    getChildrenComanyList() {
      this.tableLoading = true;

      let data = {};
      if (this.$route.query.pageType) {
        const tenantId = sessionStorage.getItem("tenantId");
        data = { ids: tenantId, ...this.searchForm };
      } else {
        data = { ...this.searchForm };
      }
      getChildrenComany(data)
        .then((res) => {
          this.tableLoading = false;
          this.data = res.data.entities || [];
          this.pagination.total = res.data.entityCount;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    handleSyncOk() {},
    handleSearch(val) {
      this.searchForm.name = val;
      this.getChildrenComanyList();
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },

    // 导出员工信息excel表
    download(i) {
      console.log(this.searchForm);
      if (i === 2) {
        this.exportData = {
          ...this.searchForm
          // companyId: this.companyId
        };
      } else {
        this.exportData = {
          ...this.searchForm,
          // companyId: this.companyId,
          ids: this.selectedRowKeys
        };
      }
      if (!this.selectedRowKeys.length && i === 1) {
        this.$notification["error"]({
          message: "error",
          description: "导出失败，至少选择一个公司"
        });
      }
      if (i === 2 || this.selectedRowKeys.length) {
        // this.url = `/hr/api/v1/statisticsPage/export`;
        this.url = `/hr/api/v1/statisticsPage/exportChildCompany`;
        let siteName = "";
        this.permissions_site.forEach((item, index) => {
          if (item.currSite) siteName = item.name;
        });
        this.excelName = `${siteName}子公司详情.xlsx`;
        this.postDownload();
      }
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
    }
  }
};
</script>

<style scoped lang="scss">
.mr12 {
  background: var(--primary);
  color: #ffffff;
}
.primarys {
  color: var(--primary);
}
</style>
